<template>
    <div class="common-layout">
      <!-- 侧边栏按钮 -->
      <el-button
        type="primary"
        class="sidebar-toggle"
        @click="drawerVisible = true"
      >
        打开历史记录
      </el-button>
  
      <!-- 侧边栏抽屉 -->
      <el-drawer
        v-model="drawerVisible"
        title="历史问答记录"
        direction="ltr"
        size="300px"
      >
        <!-- 上部分：Logo -->
        <div class="sidebar-logo">
          <img src="@/assets/logo.png" alt="Logo" class="logo-image" />
          <span class="logo-text">知识问答系统</span>
        </div>
  
        <!-- 下部分：历史对话 -->
        <div class="sidebar-history">
          <el-scrollbar>
            <el-timeline>
              <el-timeline-item
                v-for="(record, index) in historyRecords"
                :key="index"
                :timestamp="record.timestamp"
              >
                <el-card>
                  <div class="question">
                    <strong>问题：</strong>{{ record.question }}
                  </div>
                  <div class="answer">
                    <strong>答案：</strong>{{ record.answer }}
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </div>
      </el-drawer>
  
     
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  // 控制抽屉显示与隐藏
  const drawerVisible = ref(false);
  
  // 模拟历史问答记录
  const historyRecords = ref([
    {
      question: '什么是 Vue？',
      answer: 'Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。',
      timestamp: '2023-10-01 10:00',
    },
    {
      question: 'Element Plus 是什么？',
      answer: 'Element Plus 是基于 Vue 3 的 UI 组件库。',
      timestamp: '2023-10-02 11:00',
    },
    {
      question: '如何实现侧边栏？',
      answer: '可以使用 Element Plus 的 el-drawer 组件实现抽屉式侧边栏。',
      timestamp: '2023-10-03 12:00',
    },
    // 更多记录...
  ]);
  </script>
  
  <style scoped>
  .common-layout {
    position: relative;
  }
  
  .sidebar-toggle {
    position: fixed;
    left: 20px;
    top: 60px;
    z-index: 1000;
  }
  
  /* 侧边栏 Logo 部分 */
  .sidebar-logo {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  
  .logo-image {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }
  
  .logo-text {
    font-size: 18px;
    font-weight: bold;
    display: block;
  }
  
  /* 侧边栏历史对话部分 */
  .sidebar-history {
    height: calc(100vh - 180px); /* 固定高度 */
    overflow: hidden;
  }
  
  .el-timeline {
    padding: 20px;
  }
  
  .question {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .answer {
    font-size: 12px;
    color: #666;
  }
  </style>